<template>
  <div class="content">
    <van-sticky class="nav">
      <van-nav-bar title="编辑资料">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#ddd"
            @click="$router.go(-1)"
            size="25px"
          />
        </template>
      </van-nav-bar>
    </van-sticky>
    <van-cell-group inset>
      <van-cell
        class="cell"
        is-link
        title="修改头像"
        @click="$router.push(`/head/${u_id}`)"
      />
      <van-field v-model="store1.u_name" label="昵称" />
      <van-field
        v-model="store1.u_phone"
        type="digit"
        label="手机号"
        placeholder="下次登录请使用新的手机号"
      />
      <van-field v-model="store1.u_sex" label="性别" />
      <van-field v-model="store1.u_email" label="电子邮箱" />
    </van-cell-group>
    <van-button
      v-on:click="submit"
      type="primary"
      size="large"
      color="#ffc94b"
      style="
        font-size: 26px;
        margin: 0 10px;
        width: 90%;
        font-weight: bold;
        font-size: 20px;
      "
      >保存修改</van-button
    >
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, onMounted, reactive } from "vue";
import { meApi } from "@/http/apis/meApi";
import { useRoute } from "vue-router";
import router from "@/router";

// 从vuex里面拿到数据
const $store = useStore();
let store1 = reactive($store.state.user);
const u_id = ref(useRoute().params.id);

function submit() {
  let params = {
    u_id: store1.u_id,
    u_name: store1.u_name,
    u_phone: store1.u_phone,
    u_email: store1.u_email,
    u_sex: store1.u_sex,
  };
  meApi.updateUser(params).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      $store.commit("saveUserInfo", store1);
    }
  });
}
</script>

<style lang="scss" scoped>
.sculpture {
  width: 90%;
  border-radius: 50px;
  position: relative;
  right: 50%;
}
</style>
